﻿<template>
  <el-form label-position = "top" label-width="100">
    <el-collapse v-model="activeNames">
      <el-collapse-item title="通用设置" name="base">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>基础设置(编号:{{myConfig.uid}})</span>
          </div>
          <div>
            <el-row type="flex" :gutter="5" class="config-row">
              <el-col :span="24">
                <el-form-item label = "标题">
                  <el-input v-model = "myConfig.label"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row type="flex" :gutter="5" class="config-row">
               <el-col :span="12">
                <el-form-item label = "是否显示label">
                  <el-switch v-model = "myConfig.showLabel"></el-switch>
                </el-form-item>
              </el-col>
               <el-col :span="12">
                <el-form-item label = "Label占位Span">
                  <el-input-number v-model = "myConfig.labelSpan" size="small" controls-position="right" @change="handleLabelSpanChange" :min="0" :max="24"></el-input-number>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row type="flex" :gutter="5" class="config-row">
              <el-col :span="8">
                <el-form-item label = "是否显示">
                  <el-switch v-model = "myConfig.isShow"></el-switch>
                </el-form-item>
              </el-col>
            </el-row>
          </div>
        </el-card>
        <el-divider></el-divider>
        <el-row type="flex" :gutter="20">
          <el-col :span="24">
            <el-card class="box-card">
              <div slot="header" class="clearfix">
                <span>样式设定</span>
                <el-button style="float: right; padding: 3px 0" type="text" @click="addStyleItem">添加</el-button>
              </div>
              <div>
                <el-table :data = 'styleList' style = "width:100%" empty-text = "暂无数据，请添加" border stripe>
                  <el-table-column align = "center" prop = 'text' label = '样式名称'>
                    <template slot-scope = "scope">
                      <el-select v-model="scope.row.key" clearable placeholder="请选择">
                        <el-option
                          v-for="item in scope.row.keyOptions"
                          :key="item"
                          :label="item"
                          :value="item">
                        </el-option>
                      </el-select>
                    </template>
                  </el-table-column>
                  <el-table-column align = "center" prop = 'indexName' label = '值'>
                    <template slot-scope="scope">
                      <el-input v-model = "scope.row.value" placeholder = '请输入'></el-input>
                    </template>
                  </el-table-column>
                  <el-table-column align = "center" label = "操作" width = "50">
                    <template slot-scope = "scope">
                      <el-button type = "text" size = "mini" @click = "handleOptionsRemove(scope.$index)" title = '移除'>
                        <i class = "iconfont icon-shanchu"></i>
                      </el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </el-collapse-item>
      <el-collapse-item title="专属设置" name="spacial">
        <slot>暂无</slot>
      </el-collapse-item>
    </el-collapse>
  </el-form>
</template>
<script>
import {deepCopy} from '../commonUse'
export default {
  props: ['config'],
  data () {
    return {
      activeNames: [],
      styleList: [],
      styleOptions: ['height', 'max-height', 'width', 'padding', 'margin', 'border', 'background', 'color'],
      myConfig: {
        uid: '',
        isDesignMode: true,
        isShow: false,
        myStyle: {},
        label: '',
        showLabel: false,
        allowChild: false,
        children: [],
        other: {}
      }
    }
  },
  watch: {
    styleList: {
      handler: function (val, oldVal) {
        let myStyle = {}
        this.styleList.forEach(item => {
          myStyle[item.key] = item.value
        })
        this.config.myStyle = myStyle
      },
      deep: true
    },
    'myConfig.showLabel': {
      handler: function (val, oldVal) {
        this.config.showLabel = val
      },
      deep: true
    },
    'myConfig.label': {
      handler: function (val, oldVal) {
        this.config.label = val
      },
      deep: true
    },
    'myConfig.isShow': {
      handler: function (val, oldVal) {
        this.config.isShow = val
      },
      deep: true
    },
    'myConfig.children': {
      handler: function (val, oldVal) {
        this.config.children = val
      },
      deep: true
    }
  },
  onUnmounted () {
    this.myConfig = {}
  },
  mounted () {
    Object.assign(this.myConfig, this.config)
    if (this.config.myStyle) {
      let keys = Object.keys(this.config.myStyle)
      let self = this
      keys.forEach((item, index) => {
        self.styleList.push({
          key: item,
          value: self.config.myStyle[item],
          keyOptions: self.styleOptions
        })
      })
    }
    this.init()
  },
  methods: {
    addStyleItem () {
      let l = deepCopy(this.styleOptions)
      this.styleList.push({
        key: '',
        value: '',
        keyOptions: l
      })
    },
    handleOptionsRemove (index) {
      this.styleList.splice(index, 1)
    },
    init () {
    },
    handleLabelSpanChange () {
      this.config.labelSpan = this.myConfig.labelSpan
    }
  }
}
</script>
<style>
.dcomponent-config {
  padding: 0 10px 10px 10px;
}
.config-row {
  border-top: 0px solid #ebebeb
}
</style>
